<template>
  <div class="app-container">
    <!--表格渲染-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible="crud.status.cu > 0"
      :title="crud.status.title"
      width="840px"
    >
      <el-form
        ref="form"
        :model="addForm"
        :rules="rules"
        size="small"
        label-width="120px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="中心">
              <el-select
                v-model="addForm.centerId"
                filterable
                size="small"
                placeholder="请选择中心"
                class="filter-item"
                disabled
                @change="getCenterInfo"
              >
                <el-option
                  v-for="item in centerList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="访问地址">
              <el-input
                v-model="addForm.url"
                placeholder="若是cm集群,填写cm的url地址"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="集群标识">
              <el-input
                v-model="addForm.cmFlag"
                placeholder="大写英文字母命名"
                :disabled="crud.status.title=='编辑监控主机信息维护'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="集群名称">
              <el-input
                v-model="addForm.cmName"
                placeholder="请填写的集群名称"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item
              label="分组"
              required
              prop="areaId"
            >
              <el-select
                v-model="addForm.areaId"
              >
                <el-option
                  value="1"
                  label="金桥"
                />
                <el-option
                  value="2"
                  label="万国"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item
              label="排序"
              required
              prop="sortId"
            >
              <el-input
                v-model="addForm.sortId"
                placeholder="展示顺序"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item
          v-for="(item,i) in clusterList"
          :key="i"
        >
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="">
                <el-input
                  v-model="item.clusterFlag"
                  clearable
                  placeholder="子集群标识"
                  :disabled="crud.status.title=='编辑监控主机信息维护'&& item.disFlag!='1'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="">
                <el-input
                  v-model="item.clusterName"
                  clearable
                  placeholder="子集群名称"
                  :disabled="crud.status.title=='编辑监控主机信息维护'&& item.disFlag!='1'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="">
                <el-input
                  v-model="item.impalaTotalGB"
                  clearable
                  placeholder="IMPALA总内存GB"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button
                circle
                icon="el-icon-plus"
                @click="addList()"
              />
              <el-button
                v-if="i>0"
                circle
                icon="el-icon-minus"
                @click="subList(i)"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-row>
          <el-form-item label="参数配置">
            <el-input
              v-model="addForm.otherParam"
              type="textarea"
              :rows="18"
              placeholder="请填入cm集群的相关配置信息，模板如下：
              {&quot;user&quot;:&quot;admin&quot;,&quot;password&quot;:&quot;admin&quot;,&quot;kerberosFlag&quot;:&quot;true&quot;,&quot;krbConf&quot;:&quot;/etc/krb5.conf&quot;,&quot;keytab&quot;:&quot;/home/dataflow/dw_hbkas.keytab&quot;,&quot;principal&quot;:&quot;dw_hbkas&quot;,&quot;debugFlag&quot;:&quot;false&quot;}"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="crud.cancelCU"
        >取消</el-button>
        <el-button
          type="primary"
          @click="saveCmInfo()"
        >提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { form } from '@crud/crud'
import { saveCmInfo } from '@/api/monitor/clusterWh'

const defaultForm = {}
export default {
  mixins: [form(defaultForm)],
  data() {
    return {
      addForm: {
        centerId: '1',
        centerName: '',
        url: '',
        cmFlag: '',
        cmName: '',
        otherParam: '',
        clusterList: [],
        areaId: '1',
        sortId: ''
      },
      rules: {
        areaId: { required: true, message: '请选择分组', trigger: 'change' },
        sortId: { required: true, message: '请填写排序', trigger: 'change' }
      },
      clusterList: [{ 'clusterFlag': '', 'clusterName': '', 'id': 1, 'impalaTotalGB': '100' }],
      centerList: [{label: '上海', value: '1'}]
    }
  },
  created() {
    // 获取当前中心
    this.addForm.centerId = '1'
  },
  methods: {
    addList() {
      this.clusterList.push({ 'clusterFlag': '', 'clusterName': '', 'disFlag': '1', 'id': 2, 'impalaTotalGB': '100' })
    }, 
    subList(index) {
      this.clusterList.splice(index, 1)
    }, 
    saveCmInfo() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.addForm.centerName === null || this.addForm.centerName === '') {
            this.addForm.centerName = '上海'
            this.addForm.centerId = '1'
          }
          this.addForm.clusterList = this.clusterList
          saveCmInfo(this.addForm).then(res => {
            this.$notify.success({
              title: '成功',
              message: '集群信息新增成功！',
              duration: 15000
            })
            this.addForm = {}
            this.addForm.centerId = '1'
            this.crud.toQuery()
            this.crud.cancelCU()
          }).catch(err => {
            this.$notify.error({
              title: '失败',
              message: '集群信息新增失败！',
              duration: 15000
            })
            if (err != null) {
              console.log(err.response.data.message)
            } else {
              console.log('请求失败!')
            }
          })
        }
      }
      )
    },
    getCenterInfo(selVal) {
      this.addForm.centerId = '1'
      this.addForm.centerName = '上海'
    }
  }
}
</script>

<style scoped>

</style>
